import React, { Component, PureComponent } from 'react'

// export default class PureComp extends Component {
export default class PureComp extends PureComponent {

  constructor() {
    super()
    // this.address = {
    //   cityName: "郑州"
    // }
    this.state = {
      name: "大牧",
      age: 20,
      // address: this.address
      address: {
        cityName: "郑州"
      }
    }
  }

  // shouldComponentUpdate(nextProps, nextState) {
  //   // 检测name数据更新是否需要刷新页面
  //   return this.state.name !== nextState.name
  // }

  changeName() {
    this.setState({
      name: "DAMU"
    })
  }
  changeAge() {
    this.setState({
      age: 18
    })
  }
  changeAddr() {
    // 1.每次更新时，修改了address对象，赋值了一个新对象，每次都会触发更新
    // this.setState({
    //   address: {
    //     cityName: "北京"
    //   }
    // })

    // 2. 修改了对象内部数据，对象本身内存地址没有发生变化，不会发生页面刷新
    // this.state.address.cityName = "北京"
    // console.log(this.state)
    // this.setState({})
    // // this.forceUpdate()

    // 3. 对象独立管理
    // 如果直接赋值：address:this.address，就类似第二种情况，页面不会刷新
    // 如果解构赋值：address:{...this.address}，就类似第一种情况，页面每次都会刷新
    // this.address.cityName = "上海"
    // this.setState({
    //   address: { ...this.address }
    // })
  }

  render() {
    console.log("render()函数执行，刷新页面数据")
    return (
      <div>
        <h4>数据更新测试</h4>
        <p>数据：{this.state.name}</p>
        <p>数据2：{this.state.age}</p>
        <p>数据3: {this.state.address.cityName}</p>
        <button onClick={this.changeName.bind(this)}>修改数据</button>
        <button onClick={this.changeAge.bind(this)}>修改年龄</button>
        <button onClick={this.changeAddr.bind(this)}>修改地址</button>
      </div>
    )
  }
}
